<template>
    <!-- <iframe width="100%" ref="iframeRef" class="iframe" src="/core/login/login.html" frameborder="0"></iframe> -->
    <div class="page center">
        <div class="box flex flex-col">
            <div class="title">账号登录</div>
            <el-form
            :model="formData"
            :rules="rules"
            ref="ruleFormRef"
            class="form"
            >
                <el-form-item prop="account">
                    <div class="input-wrapper flex items-center w-full">
                        <input class="input w-full mr-1" @keyup.stop.prevent="onPasswordKeyup($event)" v-model="formData.account" placeholder="请输入账号" type="text">
                        <img :src="slice8" class="icon">
                    </div>
                </el-form-item>
                <el-form-item prop="password">
                    <div class="input-wrapper flex items-center w-full">
                        <input class="input w-full" @keyup.stop.prevent="onPasswordKeyup($event)" v-model="formData.password" placeholder="请输入密码" type="password">
                        <img :src="slice10" class="icon">
                    </div>
                </el-form-item>
            </el-form>
            <!-- <div class="flex justify-end">
                <el-button @click="forgotPassword" link type="primary" style="color: #0E3FB8;">忘记密码</el-button>
            </div> -->
            <div class="mt-5">
                <el-button class="w-full button submit-button" @click="onSubmit" type="primary">登录</el-button>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import request, { showRequestError, verify } from '@/Utils/request';
import type { FormInstance, FormRules } from 'element-plus';
import { onActivated, reactive, ref } from 'vue';
// import { hex_md5 } from '@/Utils/md5';
import router from '@/Router';
import { onMounted } from 'vue';
import slice8 from '@/Assets/Images/slice8.svg';
import slice10 from '@/Assets/Images/slice10.svg';
// import { useUserStore } from '@/Stores/user';
import { setCookie } from '@/Utils/utils';

const ruleFormRef = ref<FormInstance>();

const formData = reactive({
    account: '',
    password: ''
});

// const iframeRef = ref();
// const userStore = useUserStore();

const rules = reactive<FormRules>({
    account: [
        { required: true, trigger: 'blur', message: '请输入登录名' }
    ],
    password: [
        { required: true, trigger: 'blur', message: '请输入密码' }
    ],
});

const onSubmit = async () => {
    try {
        await ruleFormRef.value!.validate();
        // const SMSCode = hex_md5((Math.random() * 10000000).toString()).toString();
        // console.log('SMSCode: ', SMSCode);
        const data = await request({
            url: '/userInfo/login',
            data: {
                mobile: formData.account,
                password: formData.password
            },
            method: 'post',
            showLoading: {},
            contentTypeIsForm: false
        });
        sessionStorage.setItem("user", JSON.stringify(data));
        setCookie("token", data.token, data.tokenAge);
        setCookie("userId", data.userId, data.tokenAge);
        router.replace({
            path: '/'
        });
    } catch (error: any) {
        if (error && error.code == 20) {
            router.replace({
                path: '/'
            });
            return;
        }
        showRequestError({error})
        console.warn(error);
    }
};

const onPasswordKeyup = (eve: { code: string; }) => {
    // console.log('eve.code: ', eve.code);
    if (eve.code === 'Enter' || eve.code === 'NumpadEnter') {
        onSubmit();
    }
};

// 点击忘记密码
// const forgotPassword = () => {
//     router.replace({
//         path: '/ForgotPassword',
//         name: 'ForgotPassword'
//     });
// };

// 点击注册
// const onSignUp = () => {
//     router.push({
//         path: '/signUp',
//         name: 'SignUp'
//     });
// };

const onShow = async () => {
    verify();
};

onMounted(onShow);

onActivated(onShow);
</script>

<style lang="scss" scoped>
@import "Login.scss";
</style>